<template>
  <div class="login">

    <a @click="register" class="register-button" style="cursor: pointer">注册店铺</a>

    <div class="login-box" style="">
      <h3>Yummy系统登录3</h3>
      <el-form :model="ruleForm" size="medium" status-icon :rules="rules" ref="ruleForm" label-width="100px" ><!--class="demo-ruleForm"-->
        <el-form-item label="用户名:" prop="username">
          <el-input  v-model.number="ruleForm.username"></el-input>
        </el-form-item>
        <el-form-item label="密码:" prop="password">
          <el-input type="password" v-model="ruleForm.password" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label-width="0">
        <el-button type="primary" @click="submitForm('ruleForm')" class="submit-button" style="" >登&nbsp;&nbsp;&nbsp;&nbsp;录</el-button>
        <el-button type="warning" @click="resetForm('ruleForm')">重&nbsp;&nbsp;&nbsp;&nbsp;置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>

</template>

<script>
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: 'Login',
  data() {
    var checkUserName = (rule, value, callback) => {
      console.log(value)
      if (!value) {
        return callback(new Error('用户名不能为空'));
      }
      callback();
    };
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'));
      } else {
        callback();
      }
    };

    var checkPhone = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'));
      }else if(value.length != 11){
        callback(new Error('电话必须为11位'))
      }else {
        callback();
      }
    };
    return {
      ruleForm: {
        password: '',
        username: '',
      },
      rules: {
        password: [
          {validator: validatePass, trigger: 'blur'}
        ],
        username: [
          {validator: checkUserName, trigger: 'blur'}
        ],
        phone:[
          {validator: checkPhone, trigger: 'blur'}
        ]
      }
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$axios.post("/emp/login", this.ruleForm).then(
              resp => {
                console.log("xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx")
                console.log(resp)
                console.log("xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx")
                if (resp.data.result) {
                  console.log(resp.data.data.roleId)
                  window.localStorage.setItem("id", JSON.stringify(resp.data.data.userId))
                  window.localStorage.setItem("username", JSON.stringify(resp.data.data.username))
                  window.localStorage.setItem("Authorization", JSON.stringify(resp.data.data.Authorization))
                  this.$router.push("/home")
                }

              }
          ).catch(
              function (excp) {
                console.log(excp)
              }
          )


          console.log(this.ruleForm)
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    register() {
      this.$router.push("/register")
    }
  }
}

</script>

<style scoped>
.login {
  margin-top: 0;
  height: 100vh;
  background-image: linear-gradient(to bottom left, #303133, #606266, #909399);
  /*background-color:#ebeef5;*/
  padding-top: 200px;
}
 .register-button {
   position: absolute;
   top: 10px;
   right: 10px
 }

 .login-box {
   width: 30%;
   height: 250px;
   margin: 150px auto;
   padding-right: 50px;
   /*padding-top: 20px;*/
   border: #cccccc solid 1px;
   background-color: #ebeef5;
   border-radius: 10px;
   transition-duration: .8s;
 }

.login-box:hover {
  transition-duration: .8s;
  box-shadow: 0px 0px 10px 7px rgba(255,255,255,0.3);
}

 .submit-button {
   margin-right: 75px
 }


a{
  text-decoration:none;
  color:#909399;
}



</style>
